import React, { useEffect, useState } from 'react';
import { history } from 'umi';
import DrawerCondition from '@/components/DrawerCondition';
import CardSelect from '@/components/CardContent';
import Detail from './components/Detail';
import Follow from './components/follow';
import DealtWithList from './components/DealtWithList';
import StageRecord from './components/StageRecord';
import AllocationRecord from './components/AllocationRecord';
import PayDetail from './components/payDetail';
import OrderDetail from './components/OrderDetail';
import UserScore from './components/UserScore'
const CardDetails = (props) => {
  const { visible, onClose } = props;
  const [value, setValue] = useState('detail');
  const { show = false, detail = {} } = visible;

  const modalProps = {
    label: `用户详情`,
    visible: show,
    onClose,
    width: 950,
    footer: null,
    dataPage: false,
  };
  useEffect(() => {
    if (!show) {
      setValue('detail');
    }
  }, [show]);
  const selectList = [
    { tab: '详情', key: 'detail' },
    { tab: '待办', key: 'dealtWith' },
    { tab: '跟进', key: 'follow' },
    { tab: '阶段记录', key: 'stageRecord' },
    { tab: '分配记录', key: 'allocationRecord' },
    { tab: '订单列表', key: 'orderDetail' },
    { tab: '支付记录', key: 'payDetail' },

    { tab: '用户得分', key: 'userScore' },
    { tab: '三方事件', key: 'tripartitEvents' },
    { tab: '表单记录', key: 'formRecord' },
  ];
  const contentList = {
    detail: <Detail {...props}></Detail>,
    dealtWith: <DealtWithList {...props}></DealtWithList>,
    follow: <Follow {...props}></Follow>,
    stageRecord: <StageRecord {...props}></StageRecord>,
    allocationRecord: <AllocationRecord {...props}></AllocationRecord>,
    payDetail: <PayDetail {...props}></PayDetail>,
    orderDetail: <OrderDetail {...props}></OrderDetail>,
    userScore:<UserScore {...props}></UserScore>
  };
  return (
    <DrawerCondition {...modalProps}>
      <CardSelect
        value={value}
        onChange={(e) => setValue(e)}
        contentList={contentList}
        selectList={selectList}
        {...props}
      ></CardSelect>
    </DrawerCondition>
  );
};
export default CardDetails;
